<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>预览拓扑图</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <script type="text/javascript" src="/deng/include/include-css.js"></script>
        <link rel="stylesheet" type="text/css" href="/deng/view/monitor/graph-preview/grapheditor/styles/grapheditor.css">
        <script type="text/javascript" src="/deng/include/include.js"></script>
        <style type="text/css">
            .geSidebarContainer .geTitle {
                display: block;
                font-size: 10pt;
                border-bottom: 1px solid #f8f8f8;
                font-weight: normal;
                padding: 12px 0px 12px 14px;
                margin: 0px;
                cursor: default;
                background: #ffffff;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.4em;
            }
            .geToolbarContainer .geLabel {
                float: left;
                margin: 2px;
                cursor: pointer;
                padding: 3px 5px 18px 5px;
                border: 1px solid transparent;
                opacity: 0.6;
                filter: alpha(opacity=60);
            }
            .geDialog {
                position: absolute;
                background: white;
                overflow: hidden;
                padding: 8px;
                border: 1px solid #acacac;
                -webkit-box-shadow: 0px 0px 2px 2px #d5d5d5;
                -moz-box-shadow: 0px 0px 2px 2px #d5d5d5;
                box-shadow: 0px 0px 2px 2px #d5d5d5;
                _filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color='#d5d5d5', Positive='true');
                z-index: 2;
            }
            .m-checkbox-list .m-checkbox, .m-checkbox-list .m-radio, .m-radio-list .m-checkbox, .m-radio-list .m-radio {
                display: inline;
            }

            .geFooterContainer {
                background: #FFF;
                border-top: 1px solid #FFF;
            }
            input{
                border: none;
                outline: none;
                border-bottom: 1px solid #ebedf2;
                border-top: 1px solid #ebedf2;
                border-left: 1px solid #ebedf2;
                border-right: 1px solid #ebedf2;
            }
            input:focus,
            input:active{
                outline: none;
                border-bottom: 1px solid #ebedf2;
                border-top: 1px solid #ebedf2;
                border-left: 1px solid #ebedf2;
                border-right: 1px solid #ebedf2;
            }

            a {
                text-decoration: none;
            }
            /*正常的未被访问过的链接*/
            a:link {
                text-decoration: none;
            }
            /*已经访问过的链接*/
            a:visited {
                text-decoration: none;
            }
            /*鼠标划过(停留)的链接*/
            a:hover {
                text-decoration: none;
            }
            /* 正在点击的链接*/
            a:active {
                text-decoration: none;
            }
            .m-checkbox.m-checkbox--state-brand.m-checkbox--solid>span {
                background: #ad5beb;
                border: 1px solid transparent!important;
            }
            .m-checkbox.m-checkbox--state-brand.m-checkbox--solid>input:checked~span {
                background: #ad5beb;
            }
            .m-radio.m-radio--state-success.m-radio--solid>input:checked~span {
                background: #ad5beb;
            }
            .m-radio.m-radio--state-success.m-radio--solid>span {
                background: #ad5beb;
                border: 1px solid transparent!important;
            }

            .m-portlet {
                -webkit-box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);
                box-shadow: 0 0px 0px 0px rgba(69,65,78,.08);
                background-color: #fff;
            }

            /*滚动条整体部分,必须要设置*/
            ::-webkit-scrollbar{
                width: 0px;
                height: 0px;
                background-color: #fff;
            }
            /*滚动条的轨道*/
            ::-webkit-scrollbar-track{
                box-shadow: inset 0 0 0px rgba(0,0,0,.3);
                background-color: #fff;
            }
            /*滚动条的滑块按钮*/
            ::-webkit-scrollbar-thumb{
                border-radius: 10px;
                background-color: #e0e0e0;
                box-shadow: inset 0 0 0px #000;
            }
            /*滚动条的上下两端的按钮*/
            ::-webkit-scrollbar-button{
                height: 0px;
                background-color: #fff;
            }
            html {
                /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
                -ms-overflow-style:none;
                /*火狐下隐藏滚动条*/
                overflow:-moz-scrollbars-none;
            }
            /*Chrome下隐藏滚动条，溢出可以透明滚动*/
            html::-webkit-scrollbar{width:0px}


            .flow {
                stroke-dasharray: 8;
                animation: dash 0.5s linear;
                animation-iteration-count: infinite;
            }
            @keyframes dash {
                to {
                    stroke-dashoffset: -16;
                }
            }

            .nav-tabs-vertical a.active {
                color: #7f63f4;
                border-right: 1px solid #7f63f4;
                border-top: 0;
                border-left: 0;
            }
            .nav-tabs-vertical a, .user-intro h4, .user-skill .user-info li h5 {
                margin-bottom: .5rem;
            }

            .nav-tabs a {
                text-align: left;
                padding: .9rem;
                color: #464a53;
                font-size: 1.1rem;
            }

            .tab-content {
                padding: 5px 0 0 0;
            }

            .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
                padding-right: 1px;
                padding-left: 1px;
            }

            .nav-tabs-vertical a.active {
                /*color: #fff;*/
                border-right: 1px solid #7f63f4;
                border-top: 0;
                border-left: 0;
                /*background: #7f63f4;*/
            }
            .svBtn{
                background: #f8f8f8;color: #fff;
            }
            .flow {
                stroke-dasharray: 8;
                animation: dash 0.5s linear;
                animation-iteration-count: infinite;
            }
            @keyframes dash {
                to {
                    stroke-dashoffset: -16;
                }
            }

            .reflow {
                stroke-dasharray: 8;
                animation: redash 0.5s linear;
                animation-iteration-count: infinite;
            }
            @keyframes redash {
                to {
                    stroke-dashoffset: 16;
                }
            }
            .geToolbarContainer {
                /*background: #17C4BB;
                border-bottom: 1px solid #17C4BB;*/
            }
        </style>
    </head>

    <!-- Page passes the container for the graph to the program -->
    <body id="geEditor">
        <input type="hidden" id="mxgraphxml" value=""/>
        <input class="form-control" type="hidden" id="graph_site_id" name="graph_site_id">
        <input class="form-control" type="hidden" id="stationId" name="stationId" >
        <input class="form-control" type="hidden" id="imgxml" name="imgxml" >
        <input class="form-control" type="hidden" id="w" name="w" >
        <input class="form-control" type="hidden" id="h" name="h" >
        <input class="form-control" type="hidden" id="gridBackGround" name="gridBackGround">
        <input class="form-control" type="hidden" id="gridColor" name="gridColor">
        <input class="form-control" type="hidden" id="gridSize" name="gridSize">
        <input class="form-control" type="hidden" id="showGrid" name="showGrid">
    </body>
    <script inline="javascript">
        mxBasePath = "/deng/view/monitor/graph-preview/src";
        STYLE_PATH = "/deng/view/monitor/graph-preview/grapheditor/styles";
        RESOURCES_PATH = "/deng/view/monitor/graph-preview/grapheditor/resources";
        MXSOURCESPATH = "/deng/view/monitor/graph-preview/grapheditor";
        IMAGE_PATH = "/deng/view/monitor/power-preview";
    </script>
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/js/Init.js"></script>
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/jscolor/jscolor.js"></script>
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/sanitizer/sanitizer.min.js"></script>
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/src/js/mxClient.js"></script>

    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/js/EditorUi.js"></script>
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/js/Editor.js"></script>

    <!-- 自定义基础 -->
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/js/custom/all.js"></script>
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/js/custom/cellsButton.js"></script>
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/js/custom/cellStyle.js"></script>
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/js/custom/dragAndDrop.js"></script>
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/js/custom/nodeAttribute.js"></script>
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/js/custom/validate.js"></script>

    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/js/Sidebar.js"></script>
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/js/Graph.js"></script>
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/js/Shapes.js"></script>
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/js/Actions.js"></script>
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/js/Menus.js"></script>
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/js/Format.js"></script>
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/js/Toolbar.js"></script>
    <script type="text/javascript" src="/deng/view/monitor/graph-preview/grapheditor/js/Dialogs.js"></script>

    <!-- Example code -->
    <script type="text/javascript">
        var graphRefresh;
        function importXml(graph){
            graphRefresh = graph;
            graph.setEnabled(false);
            graph.setTooltips(true);
            graph.fit();//自适应
            // graph.center(true,true,0.5,0.5);//将画布放到容器中间
            graph.getTooltipForCell = function(cell){
                return "设备名称:"+cell.value
                    + "\n下级设备1: "+1.02
                    + "\n下级设备2: "+5.62
                    + "\n下级设备数: "+2;
            }
            //移动元素触发事件
            graph.addListener(mxEvent.CLICK,function(sender, evt){
                var cell = evt.getProperty('cell');
                if(cell==null && sender.graphHandler.cells!=null){
                    cell = sender.graphHandler.cells[0];//保证cell有值，否则移动时cell
                }
                if(cell != null && cell.vertex == 1) {//代表鼠标点击的是节点
                    cell.autoSaveNode = '1';//给cell节点增加一个自定义属性,标识处于可保存状态
                }
            });
            graph.getCursorForCell = function(cell){
                //预览时鼠标悬浮到节点时，改变鼠标样式
                if (cell != null && cell.value != null && cell.vertex ==1){
                    return 'pointer';
                }
            };
            initCellsSytle(graph);
            var parent = graph.getDefaultParent();
            var xml = $("#mxgraphxml").val();
            loadXml(graph,xml);
            // setInterval("doData()",2000);//定时更新节点
            initCellStatus(graph);
            window.setInterval("doDataStatus()", 5000);
        }

        //更新节点状态
        function doDataStatus(){
            var nodelist =graphRefresh.getModel().cells;
            var arr = [true, false];
            var oilConsumptionValueArr = [0, 51,20,80,100,81];
            var bol = arr[Math.floor(Math.random()*arr.length)];
            var oilBol = oilConsumptionValueArr[Math.floor(Math.random()*oilConsumptionValueArr.length)];

            var zxLineArr = [0,1];
            var zxLineVal = zxLineArr[Math.floor(Math.random()*zxLineArr.length)];
            for (var i in nodelist) {
                if(nodelist[i].nodeType != "zxLine" && nodelist[i].nodeType != "oilConsumption"){
                    try{
                        graphRefresh.getModel().beginUpdate();
                        graphRefresh.setCellStyles("animateSTYLE",bol, [nodelist[i]])
                    }finally {
                        graphRefresh.getModel().endUpdate();
                    }
                }
                if(nodelist[i].nodeType == "zxLine"){
                    var reFlow = false;
                    if(zxLineVal > 0){
                        //正向
                        try{
                            graphRefresh.getModel().beginUpdate();
                            graphRefresh.setCellStyles("startArrow","none", [nodelist[i]])
                            graphRefresh.setCellStyles("endArrow","classic", [nodelist[i]])
                        }finally {
                            graphRefresh.getModel().endUpdate();
                        }
                        reFlow = false;
                    }else{
                        //反向
                        try{
                            graphRefresh.getModel().beginUpdate();
                            graphRefresh.setCellStyles("startArrow","classic", [nodelist[i]])
                            graphRefresh.setCellStyles("endArrow","none", [nodelist[i]])
                        }finally {
                            graphRefresh.getModel().endUpdate();
                        }
                        reFlow = true;
                    }
                    setTimeout(function(){
                        resetZxLine(graphRefresh,reFlow);
                    },100);
                }
                if(nodelist[i].nodeType == "oilConsumption"){
                    try{
                        graphRefresh.getModel().beginUpdate();
                        graphRefresh.setCellStyles("oilConsumptionValue",oilBol, [nodelist[i]])
                    }finally {
                        graphRefresh.getModel().endUpdate();
                    }
                }
                // var overlays = graphRefresh.getCellOverlays(nodelist[i]);
                // if (overlays == null)
                // {
                //     if(nodelist[i].nodeType != "zxLine"){
                //         graphRefresh.removeCellOverlays(nodelist[i]);
                //         graphRefresh.setCellWarning(nodelist[i], 'Tooltip');
                //     }
                // }
            }
        }

        //替换节点图片
        function doData(graph){
            graph.getModel().beginUpdate();
            try{
                var nodelist =graph.getModel().cells;
                for (var i in nodelist) {
                    var picUrl = "";
                    if(nodelist[i].nodeType == 'onOffOpen') {
                        picUrl = MXSOURCESPATH+"/images/green-dot.gif";
                    }
                    else if (nodelist[i].nodeType == 'onOffClose') {
                        picUrl = MXSOURCESPATH+"/images/lightbulb_on.png";
                    }
                    // var cellId = nodelist[i];
                    // var cell = graph.getModel().getCell(cellId);//根据CellId查找CELL
                    var cell = nodelist[i];
                    // Updates the cell color and adds some tooltip information
                    if (cell != null && '' != picUrl) {
                        graph.setCellStyles(mxConstants.STYLE_IMAGE, "image;image="+picUrl, [cell]);
                    }
                }
            } finally {
                graph.getModel().endUpdate();
            }
        }

        function initCellStatus(graph){
            graph.getModel().beginUpdate();
            try{
                var nodelist =graph.getModel().cells;
                for (var i in nodelist) {
                    var cell = nodelist[i];
                    var state = 'Init';
                    if(cell.nodeType == 'onOffOpen') {
                        state = 'Init';
                    }else if(cell.nodeType == 'capacity'){
                        state = 'Running';
                    }
                    if (state == 'Running') {
                        graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, '#f8cecc', [cell]);
                    } else if (state == 'Waiting') {
                        graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, '#fff2cc', [cell]);
                    } else if (state == 'Completed') {
                        graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, '#d4e1f5', [cell]);
                    }
                    // Adds tooltip information using an overlay icon
                    if (state != 'Init') {
                        // Sets the overlay for the cell in the graph
                        graph.addCellOverlay(cell, createOverlay(graph.warningImage, 'State: '+state));
                    }
                }
            } finally {
                graph.getModel().endUpdate();
            }
        }

        /**
         * Creates an overlay object using the given tooltip and text for the alert window
         * which is being displayed on click.
         */
        function createOverlay(image, tooltip) {
            var overlay = new mxCellOverlay(image, tooltip);
            // Installs a handler for clicks on the overlay
            overlay.addListener(mxEvent.CLICK, function(sender, evt) {
                mxUtils.alert(tooltip + '\nLast update: ' + new Date());
            });
            return overlay;
        }

        var dialogWating_ = showWating({msg:'正在拼命的加载中...'});
        window.onload = function () {
            closeWating(null,dialogWating_);
        }

        // //用于生成uuid
        // function S4() {
        //     return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
        // }
        // function guid() {
        //     return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
        // }

        /** 表单序列化成json字符串的方法  */
            // function formConvertToJson(formId) {
            //     var paramArray = $('#' + formId).serializeArray();
            //     /*请求参数转json对象*/
            //     var jsonObj={};
            //     $(paramArray).each(function(){
            //         jsonObj[this.name]=this.value;
            //     });
            //     console.log("--------",JSON.stringify(paramArray));
            //     //json对象再转换成json字符串
            //     return JSON.stringify(paramArray);
            // }


            // Parses URL parameters. Supported parameters are:
            // - lang=xy: Specifies the language of the user interface.
            // - touch=1: Enables a touch-style user interface.
            // - storage=local: Enables HTML5 local storage.
            // - chrome=0: Chromeless mode.
        var urlParams = (function(url)
            {
                var result = new Object();
                var idx = url.lastIndexOf('?');

                if (idx > 0)
                {
                    var params = url.substring(idx + 1).split('&');

                    for (var i = 0; i < params.length; i++)
                    {
                        idx = params[i].indexOf('=');

                        if (idx > 0)
                        {
                            result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
                        }
                    }
                }

                return result;
            })(window.location.href);

        // Default resources are included in grapheditor resources
        mxLoadResources = false;


        // Extends EditorUi to update I/O action states based on availability of backend
        (function()
        {
            var editorUiInit = EditorUi.prototype.init;

            EditorUi.prototype.init = function()
            {
                editorUiInit.apply(this, arguments);
                this.actions.get('export').setEnabled(false);

                // Updates action states which require a backend
                if (!Editor.useLocalStorage)
                {
                    mxUtils.post(OPEN_URL, '', mxUtils.bind(this, function(req)
                    {
                        var enabled = req.getStatus() != 404;
                        this.actions.get('open').setEnabled(false);
                        this.actions.get('import').setEnabled(enabled || Graph.fileSupport);
                        this.actions.get('save').setEnabled(enabled);
                        this.actions.get('saveAs').setEnabled(enabled);
                        this.actions.get('export').setEnabled(enabled);
                    }));
                }
            };

            // Adds required resources (disables loading of fallback properties, this can only
            // be used if we know that all keys are defined in the language specific file)
            mxResources.loadDefaultBundle = false;
            var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) ||
                mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);

            // Fixes possible asynchronous requests
            console.log(STYLE_PATH);
            mxUtils.getAll([bundle, STYLE_PATH + '/default.xml'], function(xhr)
            {
                // Adds bundle text to resources
                mxResources.parse(xhr[0].getText());

                // Configures the default graph theme
                var themes = new Object();
                themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement();

                // Main
                new EditorUi(new Editor(urlParams['chrome'] == '0', themes));
            }, function()
            {
                document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
            });
        })();
    </script>
</html>